<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script type="text/javascript" src=https://vuejs.org/js/vue.js></script>
</head>
<body>

	<div id=root>
	<input v-model="inputV">
	<button @click='myclick'>提交</button>
	<ul>
	<li v-for="(n,i) of list" :key="i">{{n}}</li>
	<todo-item></todo-item>
	</ul>
	</div>
<!-- 	<div id=root v-html="msg"></div> -->
	<script type="text/javascript">
	//全局组件
// 	Vue.component('todo-item',{
// 		template:'<li>n</li>'
		
// 	})
	//定义局部组件
	var Todoitem={
		template:'<li>n</li>'
	}
	new Vue({
		el:"#root"
// 		,template:'<h1>hh {{msg}}</h1>'
		,components:{
			//使用局部组件
			'todo-item':Todoitem
		}
		,data:{
			show:true
			,inputV:""
			,list:['1']
		}
		,methods:{
			myclick:function(){
				this.list.push(this.inputV);
				this.inputV='';
			}
		}
	
	})
	</script>
</body>
</html>